<template>
  <!-- 放置Cesium的容器 -->
  <div id="cesiumContainer"></div>
</template>
<script>
import common from "../common/common";
export default {
  name: "cesiumContainer",
  data() {
    return {};
  },
  mounted() {
    let Cesium = this.Cesium;
    let options = {
      animation: false, //是否创建动画小器件，左下角仪表
      baseLayerPicker: false, //是否显示图层选择器
      fullscreenButton: false, //是否显示全屏按钮
      geocoder: false, //是否显示geocoder小器件，右上角查询按钮
      homeButton: false, //是否显示Home按钮
      infoBox: false, //是否显示信息框
      sceneModePicker: false, //是否显示3D/2D选择器
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, //是否显示时间轴
      navigationHelpButton: false, //是否显示右上角的帮助按钮
      scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      clock: new this.Cesium.Clock(), //用于控制当前时间的时钟对象
      selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型，仅baseLayerPicker设为true有意义
      imageryProviderViewModels: this.Cesium.createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
      selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
      terrainProviderViewModels: this.Cesium.createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
      // imageryProvider: new this.Cesium.OpenStreetMapImageryProvider({    //谷歌地图服务
      //   url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
      // }),
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url:
          "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
      }),
      terrainProvider: new this.Cesium.EllipsoidTerrainProvider(), //地形图层提供者，仅baseLayerPicker设为false有意义
      // skyBox: new this.Cesium.SkyBox({
      //   sources: {
      //     positiveX: "./Skybox/px.jpg",
      //     negativeX: "./Skybox/mx.jpg",
      //     positiveY: "./Skybox/py.jpg",
      //     negativeY: "./Skybox/my.jpg",
      //     positiveZ: "./Skybox/pz.jpg",
      //     negativeZ: "./Skybox/mz.jpg"
      //   }
      // }), //用于渲染星空的SkyBox对象
      fullscreenElement: document.body, //全屏时渲染的HTML元素,
      useDefaultRenderLoop: true, //如果需要控制渲染循环，则设为true
      targetFrameRate: undefined, //使用默认render loop时的帧率
      showRenderLoopErrors: false, //如果设为true，将在一个HTML面板中显示错误信息
      automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
      contextOptions: {
        webgl: {
          preserveDrawingBuffer: true //设置canvas截图使用，不设置截屏图片黑色
        }
      }, //传递给Scene对象的上下文参数（scene.options）
      sceneMode: this.Cesium.SceneMode.SCENE3D, //初始场景模式
      mapProjection: new this.Cesium.WebMercatorProjection(), //地图投影体系
      dataSources: new this.Cesium.DataSourceCollection()
      //需要进行可视化的数据源的集合
    };
    new Promise((resolve, reject) => {
      //主要地球
      let viewer = new this.Cesium.Viewer("cesiumContainer", options);
      viewer._cesiumWidget._creditContainer.style.display = "none";
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      ); //取消双击锁定
      viewer.scene.postProcessStages.fxaa.enabled = false;
      // /* 设置相机最小高度 */
      // this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000
      // /* 设置相机最大高度 */
      // this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 14023
      resolve(viewer);
    }).then(viewer => {
      common.viewer = viewer; //用中间件存值 方便调用
    });
  }
};
</script>
<style lang="less" scope>
#cesiumContainer {
  width: 100%;
  height: 100%;
}

#slider {
  position: absolute;
  left: 50%;
  top: 0%;
  background-color: #d3d3d3;
  width: 5px;
  height: 100%;
  z-index: 9999;
}

#slider:hover {
  cursor: ew-resize;
}
</style>
